/*
*   @Author: 1296
*   @Date: 2025-03-26
*   @Description: 字符验证码
*/

<!--用法-->
<!--<template>-->
<!--  <char-verification  :next-url="PATH"/>-->
<!--</template>-->

<!--<script setup>-->
<!--import CharVerification from "@/components/verification/CharVerification.vue";-->
<!--const PATH = "/"-->
<!--</script>-->

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
/* global defineProps, defineEmits */
const canvas = ref(null);
const userInput = ref("");
const message = ref("");
const code = ref("");
const isSuccess = ref(false)
const emit = defineEmits(['verification-success'])
const props = defineProps({
  nextUrl: {
    type: String,
    required: true,
    default: "/"
  }
})

const initCanvasSize = () => {
  canvas.value.width = 120;
  canvas.value.height = 40;
};

const generateCode = () => {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  let res = "";
  for (let i = 0; i < 4; i++) {
    res += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  code.value = res;
  draw();
};

const getRandomColor = () => {
  const r = Math.floor(Math.random() * 128) + 64;
  const g = Math.floor(Math.random() * 128) + 64;
  const b = Math.floor(Math.random() * 128) + 64;
  return `rgb(${r},${g},${b})`;
};

const getRandomRotation = () => {
  return (Math.random() - 0.5) * 0.4;
};

const draw = () => {
  if (!canvas.value) return;
  initCanvasSize();
  const ctx = canvas.value.getContext("2d");
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
  ctx.fillStyle = "rgba(245, 245, 245, 0.8)";
  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
  ctx.font = "24px Arial";
  for (let i = 0; i < code.value.length; i++) {
    ctx.save();
    ctx.translate(20 + i * 28, 28);
    ctx.rotate(getRandomRotation());
    ctx.fillStyle = getRandomColor();
    ctx.fillText(code.value[i], 0, 0);
    ctx.restore();
  }

  for (let i = 0; i < 8; i++) {
    ctx.beginPath();
    ctx.strokeStyle = getRandomColor();
    ctx.lineWidth = 1.5;

    const startX = Math.random() * canvas.value.width;
    const startY = Math.random() * canvas.value.height;
    const endX = startX + Math.random() * 40 - 20;
    const endY = startY + Math.random() * 40 - 20;

    ctx.moveTo(startX, startY);
    ctx.quadraticCurveTo(
        startX + Math.random() * 50 - 25,
        startY + Math.random() * 50 - 25,
        endX,
        endY
    );
    ctx.stroke();
  }

  for (let i = 0; i < 50; i++) {
    ctx.beginPath();
    ctx.fillStyle = getRandomColor();
    ctx.arc(
        Math.random() * canvas.value.width,
        Math.random() * canvas.value.height,
        Math.random() * 2,
        0,
        Math.PI * 2
    );
    ctx.fill();
  }
};

const refresh = () => {
  userInput.value = "";
  generateCode();
};

const verify = () => {
  const input = userInput.value.trim().toLowerCase();
  if (input === code.value.toLowerCase()) {
    isSuccess.value = true;
    message.value = t('VerifySuccess');
    setTimeout(() => {
      emit('verification-success')
      router.push(props.nextUrl)
    }, 1000);
  } else {
    isSuccess.value = false;
    message.value = t('VerifyFailed');
    refresh();
  }
};

onMounted(generateCode);
</script>

<template>
  <div class="verification-wrapper">
  <div class="captcha-container">
    <canvas
        ref="canvas"
        width="120"
        height="40"
        @click="refresh"
        class="captcha-canvas"
    ></canvas>

    <div class="input-group">
      <input
          v-model="userInput"
          :placeholder="t('InputVerifyCode')"
          class="captcha-input"
          @keyup.enter="verify"
      />
      <button @click="verify" class="verify-btn">{{ t('Verify') }}</button>
    </div>

    <p :class="['message', isSuccess ? 'success' : 'error']">
      {{ message }}
    </p>
  </div>
  </div>
</template>

<style scoped>
.verification-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
}

.captcha-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.captcha-canvas {
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.captcha-canvas:hover {
  transform: scale(1.02);
}

.input-group {
  display: flex;
  gap: 8px;
}

.captcha-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.verify-btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.verify-btn:hover {
  background: #0056b3;
}

.message {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.success {
  color: #28a745;
}

.error {
  color: #dc3545;
}
</style>